/*

* @Description: 店铺访客
*/
<template>
    <view class="visitor-page">
        <c-layout>
            <!-- 头部 -->
            <c-navigation-bar  :title="followUrlData.title"
						@searchEvent='searchEvent'
                              :is-search="followUrlData.type == 'bubble'?false:true">
            </c-navigation-bar>

            <view class="container-box">
                <view class="title" v-if="followUrlData.title1">
                    {{ followUrlData.title1 }}
                </view>

                <view class="group" v-if="followUrlData.type == 'bubble' || followUrlData.type == 'hot'">
                    <view class="person" v-for="item in groupList" key="item.id" @click="goAnchorHomepage">
                        <u-avatar size="160" :src='appBaseUrl+"/"+item.img' mode="square"></u-avatar>
                        <text>{{ item.text }}</text>
                    </view>
                </view>

                <view class="title" v-if="followUrlData.type == 'bubble' || followUrlData.type == 'hot'">
                    <text v-if="followUrlData.type == 'bubble'">
                        {{ followUrlData.title2 }}
                    </text>
                    <u-tabs class="tabs-type-blue" v-if="followUrlData.type == 'hot'" :list="tabsType.list"
                            :active-item-style='tabsType.activeItem' :show-bar='false' :is-scroll="true"
                            :current="tabsType.current" @change="changeTabs">
                    </u-tabs>
                </view>

                <view class="list" v-for="item in list" @click="goAnchorHomepage" :key="item.id">
                    <view class="left">
                        <u-avatar size="160" :src='$u.file.getMedieUrl(item.avatar)' mode="square"></u-avatar>
                        <view class="info">
                            <text>{{ item.nickName }}</text>
                            <!--                        <text>{{ item.info }}</text>-->
                        </view>
                    </view>
                    <text class="flex-bottom" v-if="item.concernTime">{{ item.concernTime }}</text>
                    <text v-else>{{ item.concernTime }}</text>
                </view>
            </view>

            <divider v-show="total==list.length"></divider>
        </c-layout>

    </view>
</template>

<script>
export default {
    data() {
        return {
            //搜索
            search: {
                navThmen: 'line',
                navPlaceholder: 'Donate for',
            },
            groupList: [{
                img: require('static/images/home/girl.png'),
                text: 'Kristine'
            }, {
                img: require('static/images/home/girl.png'),
                text: 'Kristine'
            }, {
                img: require('static/images/home/girl.png'),
                text: 'Kristine'
            }, {
                img: require('static/images/home/girl.png'),
                text: 'Kristine'
            }, {
                img: require('static/images/home/girl.png'),
                text: 'Kristine'
            }],
            list: [],
            followUrlData: {},
            tabsType: {
                list: [{
                    name: '健美'
                }, {
                    name: '跳舞'
                }, {
                    name: '教育'
                }, {
                    name: '组成'
                }],
                current: 0,
                activeItem: {
                    'background': '#2934D0',
                    'color': '#fff !important'
                },
            },
            pagingObj: {
                pageSize: 20,
                pageNum: 1
            },
            total: 0,
        }
    },
    onLoad(val) {
        this.followUrlData = val
        if (this.followUrlData.type) {
            this.getList(this.followUrlData.type, this.pagingObj)
        }
    },
    methods: {
        //获取数据
        getList(type, pagingObj) {
            this.$u.post('/app/user/concern/page/' + type, pagingObj).then(res => {
                this.list = [...this.list, ...res.data.records]
                this.total = res.data.total
            })
        },
        //切换
        changeTabs(index) {
            this.tabsType.current = index;
        },
        //搜索
        searchEvent(val) {
					this.list=[]
					console.log(val)
					this.pagingObj.name=val
					  this.getList(this.followUrlData.type, this.pagingObj)
        },
        //热门主播主页
        goAnchorHomepage() {
            this.$u.route('/pages/searchInfo/components/anchorCard/anchorHomepage/index', {
                type: this.followUrlData.type
            });
        }
    },
    onReachBottom() {
        if (this.list.length == this.total) {
            return
        }
        this.pagingObj.pageNum += 1
        this.getList(this.followUrlData.type, this.pagingObj)
    }
}
</script>

<style lang="scss" scoped>
.visitor-page {
  .title {
    color: #1B1D29;
    font-size: 30rpx;
    padding: 36rpx 0;
  }

  .group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    overflow-y: scroll;

    .person {
      text-align: center;
      margin-right: 40rpx;

      uni-text {
        font-size: 26rpx;
        margin-top: 15rpx;
      }
    }
  }

  .list {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 22rpx;
    color: #91909A;
    margin-bottom: 50rpx;
    position: relative;

    .left {
      display: flex;
      width: calc(100% - 96rpx);

      .info {
        margin-left: 38rpx;
        width: calc(100% - 200rpx);

        uni-text {
          &:nth-child(1) {
            color: #1B1D29;
            font-size: 26rpx;
          }

          &:nth-child(2) {
            margin-top: 10rpx;
            display: -webkit-box;
            display: -moz-box;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
            -webkit-line-clamp: 2;
          }
        }

      }
    }

    .flex-bottom {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }

  /deep/ uni-image {
    border: 3px solid #2E8CE3;
    width: 128rpx;
    height: 128rpx;
    border-radius: 50% !important;
    padding: 8rpx;

    div {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
    }
  }

  uni-text {
    display: block;
  }
}
</style>